<template>
    <div>
        <div class="mb-2">
            <div class="bg-line mb-2" v-if="humiditydata.length">
                <areaVue :data="humiditydata" :height="p.v2set.height || 130" :chart-cfg="{ padding: [8, 30, 18, 30] }"
                    :charstyle="{ lineJoin: 'round', lineCap: 'round' }"
                    :color="['l(180) 0:#FCF100  1:#F5A300', 'l(180) 0:#FE8B16  1:#F84228']"></areaVue>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { assign } from 'lodash-es';
import moment from 'moment';
import { onMounted, reactive, ref, watch } from 'vue';
import areaVue from '../../components/antv/area.vue';
import FetchApi, { logdata } from '../../logs/api';
import TuyaiotModel from '../../mysql_interface/tuyaiotmodel';
import { dealy } from '../../util/time';
import { DeviceServiceDetailResult, DeviceStatusServiceStatusListResult, Icategory } from '../interface';
import { statedata } from '../statedata';
const p = defineProps<{
    device: DeviceServiceDetailResult,
    list?: DeviceStatusServiceStatusListResult,
    tuyastate: Icategory[],
    v2set: TuyaiotModel.ITorganizeSet,
    specifications?: any[]
}>()

const formInline = reactive<logdata>({
    query: "* | with_pack_meta",
    line: 10,
    offset: 0,
    projectName: "hterobot-tuya-iot",
    logstoreName: "tuya2",
    from: new Date(moment().subtract(32, "days").unix() * 1000),
    to: new Date(moment().add(1, "days").unix() * 1000),
    reverse: true,
});

const humiditydata = ref<{
    count: number;
    day: string;
    type: string
}[]>([])

onMounted(async () => {
    await dealy(1 * 1000)
    start();
    // console.log("devChar specifications:", p.specifications)
})

function start() {
    if (p.v2set.state) {
        humiditydata.value = []
        FetchApi(assign({}, formInline, {
            query: `devId:${p.device.id} | select status0code ,AVG(cast(status0value as DECIMAL(10, 2))) as count ,date_format(date_trunc('day', __time__), '%m-%d') as day where status0code in (${p.v2set.state.map(c => `'${c}'`).join(',')})  GROUP by  day,status0code order by day asc`,
        })).then(e => {
            e.data.map(c => {
                const type = p.tuyastate?.find(e => e.name === p.device.category && e.code === c.status0code)
                const specofic = p.specifications?.find(c => c.id == p.device.id)
                // console.log("specofic:", specofic, c)
                const devStatusCfg = specofic?.result?.status.find(z => z.code == c.status0code)
                if (type) {
                    humiditydata.value.push({
                        day: c.day,
                        count: Number(statedata(c.count, type, devStatusCfg, false)),
                        type: type.dataname || ""
                    })
                } else {
                    humiditydata.value.push({
                        day: c.day,
                        count: c.count,
                        type: c.status0code
                    })
                }
            })
        })
    }
}



watch(() => p.v2set.state, () => {
    start()
})

</script>

<style scoped></style>
